<template>
  <div class="inter">
    <div class="nav">
      <Nav></Nav>
      <div class="N-nav-channel JS_NTES_LOG_FE" data-module-name="xwwzy_11_headdaohang">
        <a class="first" href="https://news.163.com/">新闻</a><a href="https://sports.163.com/">体育</a><a
        href="https://sports.163.com/nba/">NBA</a><a href="https://ent.163.com/">娱乐</a><a
        href="https://tech.163.com/game/">游戏</a><a href="https://money.163.com/">财经</a><a
        href="https://money.163.com/stock/">股票</a><a id="_link_auto" href="https://auto.163.com/">汽车</a><a
        href="https://tech.163.com/">科技</a><a href="https://mobile.163.com/">手机</a><a
        href="https://tech.163.com/smart/">智能</a><a href="https://fashion.163.com/">时尚</a><a href="https://v.163.com/">直播</a><a
        href="https://travel.163.com/">旅游</a><a id="houseUrl" href="https://house.163.com/">房产</a><a
        href="https://home.163.com/" id="homeUrl">家居</a><a href="https://edu.163.com/">教育</a><a id="_link_game"
                                                                                                href="https://sh.news.163.com/">上海</a><a
        href="https://jiankang.163.com/">健康</a><a class="last" href="https://art.163.com/">艺术</a>
      </div>
      <div class="ns_area second2016_top_ad channel_relative_2016 channel_relative_2016_lh">
        <iframe height="100" frameborder="no" width="960" scrolling="no" marginheight="0" marginwidth="0" border="0"
                src="https://g.163.com/r?site=netease&amp;affiliate=news&amp;cat=guonei&amp;type=column960x100&amp;location=1"></iframe>

        <span class="channel_ad_2016">广告</span>
      </div>
      <div class="index_head">
        <div class="ns_area hd">
          <h1>
            <a href=""><span class="channel2019_logo channel2019_air_logo">网易新闻</span></a>
            <strong>国内</strong>
          </h1>
          <span class="breadcrumbs">
                  <a href="">网易首页</a>
                  &gt;
                  <a href="">网易新闻</a>
                  &gt;
                  <span>网易国内</span>
          </span>
        </div>
        <div class="bd">
          <div class="ns_area list">
            <ul>
              <li class="first"><a href="/">首页</a></li>
              <li><a href="">图片</a></li>
              <li class="menu_guonei"><a href="/inter">国内</a></li>
              <li class="menu_guoji"><a href="/exter">国际</a></li>
              <li><a href="/shudu">数读</a></li>
              <li class="menu_war"><a href="">军事</a></li>
              <li class="menu_hangkong"><a href="">航空</a></li>
              <li><a href="">传媒研究院</a></li>
              <li><a href="">政务</a></li>
              <li><a href="">公益</a></li>
              <li><a href="">媒体</a></li>
              <li class="last"><a href="">王三三</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main_content">
      <div class="block" style="width: 594px;float: left">
        <el-carousel height="300px">
          <el-carousel-item v-for="img in Inter" :key="img">
            <img style="height: 300px;width: 600px;border-radius: 5px" :src="img" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="today_news" style="background-color: rgba(245,245,245,0.94);float: right ;height: 290px">
        <h2 class="sec_icon">今日推荐<em>HOT</em></h2>
        <ul>
          <li><a href="" title="山西绛县6人因&quot;洗洞&quot;死亡 河南三门峡曾发生类似事件">山西绛县6人因"洗洞"死亡 河南三门峡曾发生类似事件</a></li>
          <li><a href="" title="重庆姐弟坠亡案一审宣判：生父和情人获死刑">重庆姐弟坠亡案一审宣判：生父和情人获死刑</a></li>
          <li><a href="" title="山西绛县6名失踪者全部遇难:均在一处废弃矿井内找到">山西绛县6名失踪者全部遇难:均在一处废弃矿井内找到</a></li>
          <li><a href="" title="新华全媒+丨冬日里的温暖——昆明全力保障疫情封（管）控区域群众生活">新华全媒+丨冬日里的温暖——昆明全力保障疫情封（管）控区域群众生活</a></li>
          <li><a href="" title=" 茅台原董事长袁仁国等5人被取消国家级非遗代表性传承人资格"> 茅台原董事长袁仁国等5人被取消国家级非遗代表性传承人资格</a></li>
          <li><a href="" title="中央广播电视总台发布2021国内十大新闻 ">中央广播电视总台发布2021国内十大新闻 </a></li>
          <li><a href="" title="美方“以疆制华”图谋注定失败 ">美方“以疆制华”图谋注定失败 </a></li>
        </ul>
      </div>
      <div class="main" style="float: left">
        <div v-for="(item,index) in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <div class="news_content" >
            <div class="img_content" style="float: left">
              <img :src="'static/img/inter/'+item.img" style="margin-top: 10px;width: 120px;height: 88px" alt="">
            </div>
            <div class="title" style="float: right;font-size: 15px;margin-right: 80px;margin-top: 10px;color: gray">
              {{item.title}}
            </div>
            <div class="body" style="float: left;width: 240px;margin-top: 40px;margin-left: 20px;color:gray;">
              <p style="font-size: 5px">{{item.baby}} | {{item.time}}</p>
            </div>
            <div style="float: right;margin-top: 35px ;width: 200px;color: gray">
              <i class="el-icon-files"></i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-share"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="second_right">
          <!-- 即时新闻 -->
          <div class="mt23 mod_jsxw">
            <div class="idx_cm_title">
              <h2 class="title">
                即时新闻
              </h2>
            </div>
            <ul class="idx_cm_list idx_cm_list_h" style="padding-left: 0">
              <li>
                <a href="">台媒：台湾一“重要单位”今倒挂旗帜，民众傻眼</a>
              </li>
              <li>
                <a href="">美媒：美国拆分硅谷巨头是给中国送大礼</a>
              </li>
              <li>
                <a href="">俄军撤回1万余名士兵 英媒:意外地缓和了紧张局 </a>
              </li>
              <li>
                <a href="">微妙时刻 戈尔巴乔夫就俄美关系等表态</a>
              </li>
              <li>
                <a href="">印度又对5种中国产品征收反倾销税 为期5年</a>
              </li>
              <li>
                <a href="">因疫情打算放弃前往西安考研后，河南考生收到十</a>
              </li>
              <li>
                <a href="">德国商会警告立陶宛：不改善与中国关系，将关闭</a>
              </li>
              <li>
                <a href="">8130万枚“安倍口罩”还在仓库吃灰，岸田：今年</a>
              </li>
              <li>
                <a href="">阿里云未及时通报重大网络安全漏洞，会带来什么</a>
              </li>
              <li>
                <a href="">中国阻止美国“阿富汗人道豁免”草案，常驻联合</a>
              </li>
            </ul>
          </div>
          <span id="js_rfix_baseline"></span>
          <!--新闻专题  -->
          <div class="mt25 mod_news_special" id="js_right_last">
            <div class="idx_cm_title">
              <h2 class="title">新闻专题</h2>
            </div>
            <div class="bd">
              <div class="photo">
                <a href="">
                  <img
                    src="http://cms-bucket.ws.126.net/2021/1228/84e14ca6p00r4sqvh0019c0008c002ic.png?imageView&amp;thumbnail=300y90"
                    width="300" height="90" alt="工银兴农贷 奔向好日子">
                </a>
              </div>
              <h3>
                <span>HOT</span>
                <strong><a href="">工银兴农贷 奔向好日子</a></strong>
              </h3>
              <ul class="idx_cm_list" style="padding-left: 0">
                <li>
                  <a href="">十九届六中全会在京召开</a>
                </li>
                <li>
                  <a href="">2022年北京冬奥会</a>
                </li>
                <li>
                  <a href="">下半年最强寒潮来了！</a>
                </li>
                <li>
                  <a href="">省级大员人事密集调整</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";

  export default {
    name: "Inter",
    data() {
      return {
        Inter: [
          require('../assets/inter/inter1.jpg'), require('../assets/inter/inter2.jpg'), require('../assets/inter/inter3.jpg'), require('../assets/inter/inter4.jpg')
        ],
        currentPage: 1, //初始页
        pageSize: 4,    //每页的数据
        tableData: [{}],
      }
    },
    components: {
      Nav,
      Footer
    },
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },
      // test(id){
      //   alert(id)
      // },
      /*查询所有国内咨询*/
      findAll() {
        let _this = this
        this.$axios.get("http://localhost:8055/news/getInterNews").then(function (res) {
          _this.tableData = res.data
          console.log(_this.tableData)
        }).catch(function (err) {
          alert('查询失败')
        })
      },
    },
    mounted() {
      this.findAll()
    }
  }
</script>

<style scoped>


  .news_content {
    width: 600px;
    height: 120px;
    margin-top: 15px;
    border-bottom: 1px rgba(242, 243, 245, 0.94) solid;
  }

  .idx_cm_title .title {
    border-top: 1px #f34540 solid;
    font-size: 16px;
    font-weight: bold;
    float: left;
    position: relative;
    margin-top: -1px;
    padding: 6px 0px 10px 0px;
  }

  ol, ul {
    list-style: none;
  }

  .idx_cm_list li {
    position: relative;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    color: rgb(221, 221, 221);
    font-family: 宋体;
    overflow: hidden;
  }

  .idx_cm_list a {
    color: #666666;
  }

  .idx_cm_list_h li:before {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    top: 50%;
    bottom: 50%;
    background: #f34540;
    width: 3px;
    height: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .idx_cm_list li:after {
    content: "";
    background: #dddddd;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    left: 3px;
    top: 50%;
    margin-top: -2px;
  }

  .idx_cm_title {
    border-top: 1px #dddddd solid;
    height: 41px;
  }

  .second_right {
    float: right;
    width: 300px;
  }

  .mt23 {
    margin-top: 23px;
  }

  .today_news {
    float: left;
    display: inline;
  }

  .today_news h2 {
    width: 126px;
    height: 21px;
    line-height: 300px;
    overflow: hidden;
  }

  .sec_icon {
    background: url(https://static.ws.126.net/163/f2e/news/second2016/images/sprite_sec.png) no-repeat;
  }

  .today_news ul {
    margin-top: 14px;
  }

  ol, ul {
    list-style: none;
  }

  .today_news li {
    width: 325px;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    font-size: 14px;
  }

  a {
    text-decoration: none;
  }

  a {
    color: #404040;
  }

  .main_content {
    padding-top: 30px;
    height: 1300px;
    width: 960px;
    margin: 0 auto;
  }

  .index_head {
    margin-top: 25px;
    min-width: 960px;
  }

  .index_head .hd {
    height: 48px;
    overflow: hidden;
  }

  .ns_area {
    width: 960px;
    margin: 0px auto;
  }


  .index_head .hd h1 {
    float: left;
  }

  .second2016_wrap .index_head .hd h1 a {
    background: none;
    line-height: 33px;
    float: left;
    width: auto;
    height: 33px;
  }

  .index_head .hd h1 span {
    width: 140px;
    height: 33px;
    line-height: 300px;
    overflow: hidden;
    float: left;
    display: inline;
    margin: 0px 10px 0px 0px;
    background: url(https://static.ws.126.net/163/f2e/news/second2016/images/sprite_img20190530.png) no-repeat;
    background-position: 0px -6px;
  }

  .channel2019_air_logo {
    background-position: 0px 0px !important;
    height: 33px !important;
  }

  .channel2019_logo {
    background: url(http://cms-bucket.ws.126.net/2021/1117/aa3634c2p00r2p5bt003ec0008m028kc.png) no-repeat !important;
    width: 152px !important;
    height: 37px !important;
    display: block !important;
    float: left !important;
  }

  .index_head .hd h1 strong {
    float: left;
    line-height: 29px;
    font-size: 30px;
    font-weight: normal;
    color: #404040;
  }

  strong {
    font-weight: bold;
  }

  .index_head .hd .breadcrumbs {
    position: relative;
    top: 12px;
    font: normal 12px/20px 'SimSun';
    float: left;
    margin-left: 15px;
    display: inline;
  }

  a {
    text-decoration: none;
  }

  a {
    color: #404040;
  }

  .index_head .bd {
    border-top: 2px #f34540 solid;
    border-bottom: 1px #eeeeee solid;
  }

  .index_head .bd .ns_area {
    overflow: hidden;
    height: 50px;
    line-height: 20px;
  }

  .index_head .bd .ns_area ul {
    width: 1280px;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }

  .index_head .bd .ns_area li.first {
    padding-left: 0;
  }

  .second2016_wrap .index_head .bd .ns_area li {
    padding: 0px 19px 0px 11px;
  }

  .index_head .bd .ns_area li {
    float: left;
    font-size: 16px;
    padding: 0px 26px 0px 21px;
    background: url(http://static.ws.126.net/f2e/news/index2016/images/sprite_icon0813_v1.png) no-repeat 100% -53px;
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }

  .second2016_wrap .index_head .bd .ns_area li {
    padding: 0px 19px 0px 11px;
  }

  .index_head .bd .ns_area a {
    color: #000000;
    font-size: 14px;
  }

  .index_head .hd h1 span {
    width: 140px;
    height: 33px;
    line-height: 300px;
    overflow: hidden;
    float: left;
    display: inline;
    margin: 0px 10px 0px 0px;
    background: url(https://static.ws.126.net/163/f2e/news/second2016/images/sprite_img20190530.png) no-repeat;
    background-position: 0px -6px;
  }

  ol, ul {
    list-style: none;
  }

  .ns_area {
    width: 960px;
    margin: 0px auto;
  }

  .channel_relative_2016_lh {
    line-height: 0px;
  }

  .channel_relative_2016 {
    position: relative;
    line-height: 0px;
  }

  iframe[Attributes Style

  ]
  {
    height: 100px
  ;
    border-top-width: 0px
  ;
    border-right-width: 0px
  ;
    border-bottom-width: 0px
  ;
    border-left-width: 0px
  ;
    width: 960px
  ;
  }

  iframe {
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
  }

  .channel_relative_2016 .channel_ad_2016, .channel_relative_2016 .channel_ad_text_2016 {
    display: inline-block;
  }

  .channel_ad_2016 {
    height: 17px;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    background: #000 \9;
    color: #fff;
    border-radius: 0 8px 0px 0px;
    line-height: 17px;
    width: 30px;
    text-align: left;
    overflow: hidden;
    font-size: 12px;
    font-family: Arial;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
  }

  .N-nav-channel {
    padding: 14px 0;
    line-height: 13px;
  }

  .N-nav-channel, .ntes-nav {
    font-family: "\5B8B\4F53", sans-serif;
    font-size: 12px;
  }

  .N-nav-channel a.first {
    border-left: 0;
    padding-left: 0;
    padding-right: 6px;
  }

  .N-nav-channel a:link, .N-nav-channel a:visited {
    color: #252525;
  }

  .N-nav-channel {
    text-align: center;
    width: 960px;
    margin: 0 auto;
  }

  .N-nav-channel {
    font-size: 12px;
    font-family: "\5B8B\4F53", sans-serif;
  }
</style>
